<template>
	<div>
		<header class="header">
			<div>送货至</div>
			<div class="header-inner">
				<select name="" id="">
					<option value="">广东</option>
					<option value="">江苏</option>
					<option value="">新疆</option>
				</select>
				<select name="" id="">
					<option value="">深圳</option>
					<option value="">乌鲁木齐</option>
					<option value="">南京</option>
				</select>
				<select name="" id="">
					<option value="">罗湖区</option>
					<option value="">宝安区</option>
					<option value="">龙华区</option>
				</select>
			</div>
		</header>

		<table class="table">
			<tr class="first-tr">
				<td class="first-tr-td">
					<span><input type="checkbox" /></span>
					<span class="first-tr-td-span">全选</span>
				</td>

				<td>商品信息</td>
				<td>规格</td>
				<td>单价（元）</td>
				<td>数量</td>
				<td>小计（元）</td>
				<td>操作</td>
			</tr>
			<tr>
				<td class="checkbox">
					<div><input type="checkbox" /></div>
					<img
						src="https://imgservice.suning.cn/uimg1/b2c/image/19l9gXVTnGHrK71NGPzKfg.jpg_100w_100h_4e"
						alt=""
					/>
				</td>

				<td class="two-td">
					苹果(Apple) iPhone 13 256GB 粉色 移动联通电信5G全网通手机 双卡双待
					苹果iphone13
				</td>
				<td>
					<p>颜色：粉色</p>
					<p>版本：iPhone13（256GB）</p>
				</td>
				<td>¥5999.00</td>
				<td>
					<div class="input-sun">
						<a href="">-</a><input type="text" /><a href="">+</a>
					</div>
					<p>最多可买 1件</p>
				</td>
				<td>¥5999.00</td>
				<td class="button-tool">
					<button>移入关注</button>
					<button>删除</button>
				</td>
			</tr>
			<tr>
				<td class="checkbox">
					<div><input type="checkbox" /></div>
					<img
						src="https://imgservice.suning.cn/uimg1/b2c/image/19l9gXVTnGHrK71NGPzKfg.jpg_100w_100h_4e"
						alt=""
					/>
				</td>

				<td class="two-td">
					苹果(Apple) iPhone 13 256GB 粉色 移动联通电信5G全网通手机 双卡双待
					苹果iphone13
				</td>
				<td>
					<p>颜色：粉色</p>
					<p>版本：iPhone13（256GB）</p>
				</td>
				<td>¥5999.00</td>
				<td>
					<div class="input-sun">
						<a href="">-</a><input type="text" /><a href="">+</a>
					</div>
					<p>最多可买 1件</p>
				</td>
				<td>¥5999.00</td>
				<td class="button-tool">
					<button>移入关注</button>
					<button>删除</button>
				</td>
			</tr>
			<tr class="tr-footer">
				<td class="tr-footer-first">
					<input type="checkbox" /><span>全选</span>
				</td>
				<td>删除选中商品</td>
				<td>已选商品0件</td>
				<td>总价（含运费）：¥6799.00 运费（以结算页为准）：¥0.00</td>
				<td>
					<button disabled><a href="">去结算</a></button>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
import getShopCarListData from "@/api/shopCar"
export default {
	name: "shopCarList",
	state: () => {
		return {
			shopCarList: [],
		}
	},
	mounted() {
		;async () => {
			console.log(123)
			const result = await getShopCarListData()
			this.shopCarList = result
			console.log(this.shopCarList)
		}
	},
	methods: {},
}
</script>

<style lang="less" scoped>
.header {
	display: flex;
	margin-left: 165px;
	.header-inner select {
		border: 1px solid #f3f3f3;
		outline-color: pink;
		border-radius: 1px;
		margin-right: 5px;
	}
}
.table {
	width: 1190px;
	border: 1px #f3f0eb solid;

	margin: 0 auto;
	.checkbox {
		width: 150px;
		display: flex;

		div {
			width: 50px;
			input {
				margin-top: 50px;
			}
		}
	}
	.two-td {
		width: 240px;
	}
	.first-tr {
		height: 33px;
		background-color: #ffff;
		border: 1px #f3f3f3 solid;
		:first-child {
			display: flex;
			width: 50px;
		}
	}

	tr {
		display: flex;
		justify-content: space-between;
		height: 120px;
		background-color: #fffbf2;
		td {
			text-align: center;
		}
		.input-sun {
			input {
				width: 50px;
			}
			a {
				width: 25px;
				border: 1px solid #f3f3;
			}
		}
	}

	.button-tool button {
		display: block;
		margin: 0 auto;
		border: none;
	}

	.tr-footer {
		height: 60px;
		background-color: #fff;

		.tr-footer-first {
			display: flex;
			margin-left: 15px;
			span {
				background-color: #fff;
			}
			input {
				margin-top: 25px;
			}
		}
		td {
			line-height: 60px;
		}
		:first-child {
			width: 50px;
		}
		:last-child {
			width: 120px;
			background-color: rgb(247, 225, 25);
			button {
				border: none;
				a {
					font-size: 20px;
					color: azure;
				}
			}
		}
	}
}
</style>
